<template>
  <div class="ep-home-epyagemap" style="width:100%">
    <!-- <div class="cobody db-echartstent"> -->
      <echarts
        :options="option"
        :auto-resize="true"
        style="width: 100%;height: 200px"
      ></echarts>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  name: 'cdp-epy-personnel-change',
  // props: {
  //   widthStyle: {
  //       type: Number,
  //       default: 1,
  //   },
  // },
  data () {
    return {
      option: {}
    }
  },
  created () {
    this.getEpyData()
  },
  methods: {
    getEpyData () {
      this.option = {
        tooltip: {
          backgroundColor: 'rgba(255,255,255,0.8)',
          padding: [5, 45, 5, 20],
          extraCssText: 'box-shadow: 0px 0px 8px 0px rgba(150,178,191,0.5);line-height:30px; white-space:pre-wrap',
          trigger: 'axis',
          textStyle: {
            color: '#313131',
            fontFamily: 'PingFangSC, PingFangSC-Regular',
            fontSize: 12,
            fontWeight: 400,
            align: 'left'
          },
          axisPointer: {
            type: 'shadow',
            shadowStyle: { color: 'rgba(45,153,255,0.08)' }
          },
          formatter: (name) => {
            let arr = ''
            name.forEach(item => {
              arr += item.marker + '&nbsp;' + item.seriesName + '&nbsp;&nbsp;' + item.value + '人' + '\n'
            })
            return arr
          }
        },
        legend: {
          itemWidth: 10, // 更改legend图标大小
          top: '7%',
          itemGap: 20, // 图例间隔
          right: '1%',
          icon: 'circle'
          // data: ["新进人员", "流出人员"]
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0',
          top: '40px',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            splitLine: { lineStyle: { color: '#F5F7F8' } },
            axisLabel: { color: '#9EA2A9' },
            data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月'],
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: ' #fff',
                width: '0px'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: { lineStyle: { color: '#eeeeee' } },
            axisLabel: { color: '#C9CFD4' },
            axisTick: { show: false },
            splitNumber: 5,
            axisLine: {
              lineStyle: {
                color: ' #fff',
                width: '0px'
              }
            }
          }
        ],
        series: [
          {
            itemStyle: {
              normal: { barBorderRadius: [4, 4, 0, 0], color: '#99dfff' }
            },
            name: '新增用户',
            type: 'bar',
            barCategoryGap: '50%',
            barWidth: 12,
            barGap: '40%',
            data: [102, 62, 152, 83, 112, 78, 203]
          },
          {
            itemStyle: {
              normal: { barBorderRadius: [4, 4, 0, 0], color: '#8695ff' }
            },
            name: '在线用户',
            type: 'bar',
            barWidth: 12,
            data: [290, 140, 106, 251, 70, 162, 247]
          }
        ]
      }
    }
  }
}
</script>

<style></style>
